<template>
  <div class="xy-ks" v-if="!getIsPhone">
    <select-number-public
      :options="options"
      :currentLottery="getLotteryType.lotteryName"
      :winningInfo="winningInfo"
      :winningNumbers="winningNumbers"
      @mutate="handleMutate"
    >
      <template v-slot:winninginfo>
        <winning-numbers :winningNumbers="winningNumbers">
          <winning-info-ks :winningNumbers="winningNumbers"></winning-info-ks>
        </winning-numbers>
      </template>
      <transition name="fade" mode="out-in">
        <component :is="getCurrentComponent"></component>
      </transition>
    </select-number-public>
  </div>
  <div v-else class="xy-ks-phone" >
    <div class="fixed-top">
      <winning-numbers :winningNumbers="winningNumbers">
        <div class="numbers">
          <span class="border-right" v-for="(number, index) in winningNumbers.previous.numbers.split(',')" :key="index">{{number}}</span>
        </div>
      </winning-numbers>
      <sub-dropdown-phone></sub-dropdown-phone>
    </div>
    <transition name="fade" mode="out-in">
      <component :is="getCurrentComponent"></component>
    </transition>
    <side-slider-phone :options="options" @click="handleMutate"></side-slider-phone>
  </div>
</template>

<script>
import SelectNumberPublic from '@/components/select-number-public/select-number-public'
import WinningNumbers from '@/components/winning-numbers/winning-numbers'
import WinningInfoKs from '@/components/winning-info/winning-info-ks'
import hezhi from '@/components/lottery-type/kuaisan/hezhi/hezhi'
import santonghao from '@/components/lottery-type/kuaisan/santonghao/santonghao'
import biaozhun from '@/components/lottery-type/kuaisan/sanbutonghao/biaozhun'
import dantuo from '@/components/lottery-type/kuaisan/sanbutonghao/dantuo'
import fuxuan from '@/components/lottery-type/kuaisan/ertonghao/fuxuan'
import danxuan from '@/components/lottery-type/kuaisan/ertonghao/danxuan'
import SideSliderPhone from '@/components/base/phone/side-slider-phone/side-slider-phone'
import SubDropdownPhone from '@/components/base/phone/sub-dropdown-phone/sub-dropdown-phone'


import { mapGetters, mapMutations } from 'vuex'

export default {
  components: {
    SelectNumberPublic,
    WinningNumbers,
    WinningInfoKs,
    SideSliderPhone,
    SubDropdownPhone,
    santonghao,
    biaozhun,
    dantuo,
    fuxuan,
    danxuan,
    hezhi
  },
  data() {
    return {
      // 开奖信息
      winningNumbers: {
        id: 'xyks',
        lotteryName: '幸运快三',
        dateNo: '819048',
        previous: {
          dateNo: '819049',
          numbers: '1,2,9',
          context: '13,大,小,单,双',
        },
        closeTime: new Date().getTime() + 1000000,
        drawTime: new Date().getTime() + 10000000
      },
      // 上期中奖信息
      winningInfo: [
        { 
          id: 1,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 2,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 3,
          series: 819049,
          numbers: '1,2,3'
          
        },
        {
          id: 4,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 5,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 6,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 7,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 8,
          series: 819049,
          numbers: '1,2,3'
        },
        {
          id: 9,
          series: 819049,
          numbers: '1,2,3'
        }
      ],
      // tab选项
      options: [
        {
          id: 'h_z',
          context: '和值',
          currentComponent: 'hezhi',
          currentSubTab: '和值',
          currentSubId: 'h_z',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'h_z',
                  context: '和值',
                  components: 'hezhi'
                },
              ]
            }
          ]
        },
        {
          id: 's_t_h',
          context: '三同号',
          currentSubId: 's_t_h',
          currentComponent: 'santonghao',
          currentSub: '三同号',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 's_t_h',
                  context: '三同号',
                  components: 'santonghao'
                }
              ]
            }
          ]
        },
        {
          id: 'sb_th',
          context: '三不同号',
          currentSubId: 'b_z',
          currentComponent: 'biaozhun',
          currentSubTab: '标准',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'b_z',
                  context: '标准',
                  components: 'biaozhun'
                },
                {
                  id: 'd_t',
                  context: '胆拖',
                  components: 'dantuo',
                }
              ]
            }
          ]
        },
        {
          id: 'e_t_h',
          context: '二同号',
          currentSubId: 'et_fx',
          currentComponent: 'fuxuan',
          currentSubTab: '复选',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'et_fx',
                  context: '复选',
                  components: 'fuxuan',
                },
                {
                  id: 'et_dx',
                  context: '单选',
                  components: 'danxuan',
                },
              ]
            }
          ]
        }
      ]
    }
  },
  created() {
    this.setLotteryType({lotteryName: this.winningNumbers.lotteryName, id: this.winningNumbers.id})
    this.setCurrentLotteryDateNo(this.winningNumbers.dateNo)
    this.setCurrentSubId(this.options[0].currentSubId)
    this.setCurrentComponent(this.options[0].currentComponent)
    this.setCurrentMainTab({mainTabName: this.options[0].context, id: this.options[0].id })
    this.setCurrentTab({subTabName: this.options[0].currentSubTab, id: this.options[0].currentSubId})
  },
  methods: {
    handleMutate(options) {
      this.options = options
    },
    ...mapMutations('lottery', {
      setLotteryType: 'SET_LOTTERY_TYPE',
      setCurrentComponent: 'SET_CURRENT_COMPONENT',
      setCurrentMainTab: 'SET_CURRENT_MAIN_TAB',
      setCurrentTab: 'SET_CURRENT_TAB',
      setCurrentLotteryDateNo: 'SET_CURRENT_LOTTERY_DATE_NO',
      setCurrentSubId: 'SET_CURRENT_SUB_ID',
    })
  },
  computed: {
    ...mapGetters('lottery', [
      'getCurrentComponent',
      'getIsPhone',
      'getLotteryType'
    ])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  &.fade-enter, &.fade-leave-to 
    opacity 0
  &.fade-leave, &.fade-enter-to 
    opacity 1
  &.fade-enter-active, &.fade-leave-active 
    transition all 0.2s 
  @media screen and (max-width 750px) 
    .xy-ks-phone 
      width 100%
      box-sizing border-box
      padding-top 148px
      .fixed-top 
        position fixed 
        top 48px 
        left 0 
        right 0 
        z-index 9
        background #fff
        .numbers 
          span  
            display inline-block
            width 25px
            height 10px
            line-height 10px
            text-align center
            font-size 16px 
            font-weight 400
            font-family $sub-font-family
            color $color-theme-red 
            font-weight 700
</style>